<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字特效</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body {
      display: flex;
      height: 100vh;
      background-color: #2c3e50ff;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    .color{
      animation-name: color;
      animation-duration: 1.5s;
      animation-iteration-count: 2;
      animation-timing-function: linear;
      animation-direction: alternate;
      text-shadow: darkgreen;
    }
    @keyframes color {
      0%{
        color: #e67e22;
      }
      30%{
        color: #f1c40f;
        transform: scale(1.5);
        text-shadow: 0px 0px 20px #2980b9;
      }to{
        color: #c0392b;
      }
    }
    #texta {
      font-size: 5em;
      font-weight: bold;
      text-transform: uppercase;
    }
    #texta>span {
      position: relative;
      display: inline-block;
      margin-left: 40px;
      text-shadow: 0px 0px 10px #8e44ad;
    }
  </style>
</head>
<body>
  <div id="texta">吃葡萄不吐葡萄皮</div>
  <script>
    let div = document.querySelector('#texta')
    let arr = [...div.innerText]
    arr.reduce(function (pre, cur, index) {
      // console.log(pre, cur, index);
      if (pre === index) {
        div.innerHTML = ''
      }
      let span = document.createElement('span')
      span.innerHTML = cur
      div.appendChild(span)
      span.addEventListener('mouseover', function () {
        this.classList.add('color')
      })
      span.addEventListener('animationend', function () {
        this.classList.remove('color')
      })
    },0)
  </script>
</body>
</html>